Electron + Vue3 + TS + Vite

#Electron + Vue3 + TS + Vite| 来源: 网络整理| 查看: 265

简介

首先，介绍下vite和Electron。

Vite是一种新型前端构建工具，能够显著提升前端开发体验。由尤大推出，其发动态表示“再也回不去webpack了...” Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。嵌入Chromium和Node.js到二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发经验。

当开始想用vue去开发一个桌面应用时，首先去搜索下，了解到当前如下两种现成方案：

electron-vue：该项目集成度较好，封装较为完整，中文搜索下来文章较多也是该方案，可以直接上手去使用。但是，问题在于其内置electron的版本相比较低，近两年内没更新过，直接pass。 Vue CLI Plugin Electron Builder：该方案是集成到到vue-cli中使用，使用vue add electron-builder后可直接上手，免去了基础配置的步骤。但是其只能在vue-cli下使用，无法配合vite来使用。

因此，若要使用vite和electron，还需要自己来配置。

1.初始化项目

先借助Vite初始化一个Vue3+TS 的项目，后面我们在逐步添加electron，在任何一个文件夹下：

执行命令 npm create vite@latest my-vue-app -- --template vue-ts 复制代码进入项目 cd my-vue-app 复制代码安装依赖 npm install 复制代码运行项目 npm run dev 复制代码

如下图所示 Vue3 + TS + Vite的前端项目就初始化好了

2.安装Electron相关包

初始化一个基本项目后，我们需要在项目中安装一些关于electron的包。

安装electron： npm install electron -D 复制代码

如果你安装electron不成功，建议使用cnpm安装。

安装electron-builder： npm install electron-builder -D 复制代码

主要利用electron-builder来进行打包。

安装electron-devtools-installer： npm install electron-devtools-installer -D 复制代码

该包主要是为了方便我们开发和调试electron，可以去官网详细了解：electron-devtools-installer。

安装vite-plugin-electron： npm install vite-plugin-electron -D 复制代码

该包集成了Vite和Electron，比如使用它之后可以让我们方便的在渲染进程中使用Node API或者Electron API，详细使用用法可以去官网学习：vite-plugin-electron。

安装rimraf ： npm install rimraf -D 复制代码

该包主要是辅助作用，让我们快速删除某些文件和文件夹。

3.初始化Electron

Electron项目分为了主进程和渲染进程，主进程其实就是我们的Electron，渲染进程就相当于我们的Vue项目。

新建主进程

为了方便修改代码和查看，我们在项目根目录新建主进程文件夹electron-main，然后在其目录下新建index.ts文件，编写主进程代码。

// electron-main/index.ts import { app, BrowserWindow } from "electron"; import path from "path"; const createWindow = () => { const win = new BrowserWindow({ webPreferences: { contextIsolation: false, // 是否开启隔离上下文 nodeIntegration: true, // 渲染进程使用Node API preload: path.join(__dirname, "../electron-preload/index.js"), // 需要引用js文件 }, }); // 如果打包了，渲染index.html if (app.isPackaged) { win.loadFile(path.join(__dirname, "../index.html")); } else { let url = "http://localhost:3000"; // 本地启动的vue项目路径 win.loadURL(url); } }; app.whenReady().then(() => { createWindow(); // 创建窗口 app.on("activate", () => { if (BrowserWindow.getAllWindows().length === 0) createWindow(); }); }); // 关闭窗口 app.on("window-all-closed", () => { if (process.platform !== "darwin") { app.quit(); } }); 复制代码

上段代码只是一个最简单的Electron主进程的代码，大家也可以直接去官网看一下即可。这里有两个点需要大家注意：

渲染进程路径引用的是js而不是ts，因为我们的electron是不认识ts文件的，有些小伙伴可能不理解引用的js文件合适产生的，这都不用着急，我们安装的插件会帮我们解决的。 app.isPackaged主要是用来判断应用是否已经打包了，打包了我们只需要引用相对路径的html文件即可。新建预加载文件

electron中有一个预加载的概念，也就是我们常说的preload，在该文件里面可以在其它脚本文件执行之前运行，它可以调用一些Node API。

在项目根目录新建electron-preload文件夹，然后在其目录下新建index.ts文件，编写代码。

// electron-preload/index.ts import os from "os"; console.log("platform", os.platform()); 复制代码

上段代码只是一个示例，我们只是简单的打印了一下系统信息罢了，重点是需要大家理解预加载这个概念，以及预加载可以做什么。

修改tsconfig.json

前面我们已经建好了渲染进程和预加载文件，但是我们是放在项目根目录里面的。自动生成的Vue3+ts项目只初始化了src目录下的文件监听，所以我们需要修改一下tsconfig.json配置文件。

在include属性里新增关于electron文件监听的配置项

"include": [ "src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "electron-main/**/*.ts", "electron-preload/**/*.ts" ], 复制代码修改package.json

配置我们项目的入口文件以及打包的相关配置。

我们还需要写一些关于electron-builder的打包脚本代码，如果想要详细了解脚本的各项配置项的作用的，可以去官网学习一些：electron-builder

{ "name": "my-vue-app", "private": true, "version": "0.0.0", "main": "dist/electron-main/index.js", "scripts": { "dev": "vite", "build": "rimraf dist && vite build && electron-builder", "preview": "vite preview" }, "dependencies": { "vue": "^3.2.25" }, "devDependencies": { "@vitejs/plugin-vue": "^2.3.3", "electron": "^19.0.0", "electron-builder": "^23.0.3", "electron-devtools-installer": "^3.2.0", "multispinner": "^0.2.1", "rimraf": "^3.0.2", "typescript": "^4.5.4", "vite": "^2.9.9", "vite-plugin-electron": "^0.4.5", "vue-tsc": "^0.34.7" }, "build": { "appId": "com.smallpig.desktop", "productName": "smallpig", "asar": true, "copyright": "Copyright © 2022 smallpig", "directories": { "output": "release/${version}" }, "files": [ "dist" ], "mac": { "artifactName": "${productName}_${version}.${ext}", "target": [ "dmg" ] }, "win": { "target": [ { "target": "nsis", "arch": [ "x64" ] } ], "artifactName": "${productName}_${version}.${ext}" }, "nsis": { "oneClick": false, "perMachine": false, "allowToChangeInstallationDirectory": true, "deleteAppDataOnUninstall": false }, "publish": [ { "provider": "generic", "url": "http://127.0.0.1:8080" } ], "releaseInfo": { "releaseNotes": "版本更新的具体内容" } } } 复制代码修改vite.config.ts import { defineConfig } from "vite"; import vue from "@vitejs/plugin-vue"; import * as path from "path"; import electron from "vite-plugin-electron"; import electronRenderer from "vite-plugin-electron/renderer"; import polyfillExports from "vite-plugin-electron/polyfill-exports"; export default defineConfig({ plugins: [ vue(), electron({ main: { entry: "electron-main/index.ts", // 主进程文件 }, preload: { input: path.join(__dirname, "./electron-preload/index.ts"), // 预加载文件 }, }), electronRenderer(), polyfillExports(), ], build: { emptyOutDir: false, // 默认情况下，若 outDir 在 root 目录下，则 Vite 会在构建时清空该目录 }, }); 复制代码

在上面的配置中，我们使用到了vite-plugin-electron插件，它将我们的electron和vite很好的结合了起来。

其实到这里大家启动项目后就会发现，electron出面其实已经就出现了，界面如下：

执行打包： npm run build 复制代码

如下图，就说明打包完成！

温馨提示

由于相关依赖版本更新，相关api发生改动，导致运行出错，一切以官网为准！

【本文地址】

公司简介

联系我们